<template>
	<el-container>
		<el-main v-loading="loading">
			<el-row type="flex" justify="end" class="height-100 overflow-hidden hidden-xs-only">
				<img class="bg-img height-100vh width-100vw" src="../assets/logo.png"/>
				<el-col class="infoBox y_flex_column " :xl='6' :lg='5' :md="8" :sm='9' :xs='15'  >
					<el-row type="flex" class="y_flex_1">
						<el-input v-model="form.user" placeholder="学号\电话号码"></el-input>
					</el-row>
					<el-row type="flex" class="y_flex_1">
						<el-input v-model="form.password" show-password placeholder="密码"></el-input>
					</el-row>
					<el-row type="flex" class="y_flex_1">
						<el-checkbox @change="manbePassword" v-model="checked">记住密码</el-checkbox>
					</el-row>
					<el-row type="flex" class="y_flex_1">
						<el-radio-group v-model="form.key">
						    <el-radio v-for="(item,index) in radioList" :key="index" :label="item.label">{{item.content}}</el-radio>
						  </el-radio-group>
					</el-row>
					<el-row type="flex" class="y_flex_1">
						<button @click="info">登录</button>
					</el-row>
				</el-col>
			</el-row>
			<el-row type="flex" justify="center" class="height-100 overflow-hidden hidden-sm-and-up">
				<img class="bg-img height-100vh width-100vw" src="../assets/logo.png"/>
				<el-col class="infoBox y_flex_column" style="margin-top: 20vh;" :xl='6' :lg='5' :md="8" :sm='9' :xs='18'  >
					<el-row type="flex" class="y_flex_1">
						<el-input v-model="form.user" placeholder="学号\电话号码"></el-input>
					</el-row>
					<el-row type="flex" class="y_flex_1">
						<el-input v-model="form.password" show-password placeholder="密码"></el-input>
					</el-row>
					<el-row type="flex" class="y_flex_1">
						<el-checkbox @change="manbePassword" v-model="checked">记住密码</el-checkbox>
					</el-row>
					<el-row type="flex" class="y_flex_1">
						<el-radio-group v-model="form.key">
						    <el-radio v-for="(item,index) in radioList" :key="index" :label="item.label">{{item.content}}</el-radio>
						  </el-radio-group>
					</el-row>
					<el-row type="flex" class="y_flex_1">
						<button @click="info">登录</button>
					</el-row>
				</el-col>
			</el-row>
		</el-main>
	</el-container>
</template>

<script>
	var that;
	export default {
		data(){
			return{
				loading:false,
				//单选列表
				radioList:[
					{
						label:1,
						content:'学生'
					},
					{
						label:2,
						content:'教师'
					},
					{
						label:3,
						content:'教务'
					}
				],
				// 表单
				form:{
					key:1,
					user:'',
					password:'',
				},
				checked:''
			}
		},
		mounted() {
			that = this
			this.manbePasswordIF()
			this.checkToken()
		},
		methods:{
			// 登录
			info(){
				that.loading = true
				this.$model.post('/pc/login',this.form).then(res=>{
					that.loading = false
					// 判断是否有数据返回
					if(res.data){
						// 判断是否点击是否记住密码
						if(this.checked){
							localStorage.setItem('ManbePassword',JSON.stringify(this.form))
						}
						if(res.data.token){
							localStorage.setItem('token',res.data.token)
						}
						this.$router.push('/home/manage')
					}
				}).catch(res=>{
					that.loading = false
				})
			},
			// 判断是否记住密码
			manbePasswordIF(){
				if(localStorage.getItem('ManbePassword')){
					this.checked = true
					this.form = JSON.parse(localStorage.getItem('ManbePassword'))
				}else{
					this.checked = ''
				}
			},
			// 移除缓存中的密码
			manbePassword(res){
				if(!res){
					localStorage.removeItem('ManbePassword')
					console.log(res+'删除');
				}
				console.log(res);
			},
			// 判断是否有token
			checkToken(){
				if(localStorage.getItem('token')){
					console.log('token:'+localStorage.getItem('token'));
					this.$model.get('/pc/chateToken').then(res=>{
						console.log(res)
						localStorage.setItem('user',JSON.stringify(res.data))
						this.$router.push('/home/manage')
					})
				}
			},
		}
	}
</script>

<style>
	
</style>

<style scoped lang="scss">
	.el-main{
		padding: 0px !important;
		height: 100vh;
	}
	.bg-img{
		position: absolute;
		background: #ffffff;
	}
	.infoBox{
		position: relative;
		height: 300px;
		margin: 100px 150px 0px 0px;
		padding: 20px;
		line-height: 40px;
		border-radius: 5px;
		background: rgba(85, 170, 255, 0.8);
		
		.Ypaddings{
			padding:20px 0px;
		}
		
		button {
			border: none;
			width: 100%;
			height: 40px;
			background:rgba(255, 255, 255, 1.0);
			border-radius: 10px;
		}
		button:active {
			background: rgba(255, 170, 127, 1.0);
		}
	}
	
	@media (max-width:440px) {
		.infoBox{
			margin: 0;
		}
	}
</style>